.box {
    overflow: auto;
    height: 100%;
    padding: 24px;
    background: rgb(77, 76, 75);
    width: 100%;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;

    .imgbox {
        width: 400px;
        height: 200px;
        background-color: #963;
        // border: 4px solid #963;
        border: 4px solid var(--imgurl);
        margin: 2px;
        overflow: auto;

        .img {
            width: 100%;
            height: 100%;
            // border: ;

        }
    }

    .sty3d {
        background-color: #000;
        background-image: url('https://cn.bing.com/th?id=OHR.RedneckedGrebe_ZH-CN6036749974_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp');
        background-size: cover;
        width: 800px;
        height: 400px;
        position: relative;

        .mask1 {
            color: #fff;
            line-height: 120px;
            position: absolute;
            top: 50px;
            left: 400px;
            // right: 0;
            // bottom: 0;
            // margin: auto;
            width: 160px;
            height: 120px;
            background-color: rgba($color: red, $alpha: .2);
            border: 4px solid red;
            transform: rotateX(60deg) rotateY(0deg) rotateZ(30deg);
        }

        .mask2 {
            color: #fff;
            line-height: 120px;
            position: absolute;
            top: 150px;
            left: 400px;
            width: 160px;
            height: 120px;
            background-color: rgba($color: red, $alpha: .2);
            border: 4px solid red;
            transform: rotateX(60deg) rotateY(0deg) rotateZ(30deg);
        }
    }

    .globalcss {
        padding: 36px;

        :global {
            .ant-btn {
                background-color: #369;
                color: #fff;
            }
        }
    }
}